<template>
  <div class="tc_transfer">
    <div class="tc_tree">
      <div class="tree_title">
        已选步骤：（可拖拽排序）
        <el-button
          v-if="checkKeys && checkKeys.length"
          size="small"
          type="primary"
          icon="el-icon-delete"
          @click="clearTargetList"
        >清空
        </el-button>
      </div>
      <el-tree
        class="tree_body"
        empty-text="无数据"
        :data="targetList"
        node-key="id"
        draggable
        :allow-drop="allowDrop"
        @node-drag-end="dragEnd"
        v-slot="{node,data}"
      >
        <div class="tc-tree-node">
          <div class="text-wrap">
            <span class="sort">{{ data.order }}</span>
            <span class="name">{{ data.stepName }}</span>
          </div>
          <i class="delete el-icon-delete" @click="handleDelete(node)"></i>
        </div>
      </el-tree>
    </div>
    <div class="tc_tree" style="margin-left: 40px">
      <div class="tree_title">
        可选步骤
      </div>
      <div class="filter-wrap">
        <el-input
          placeholder="请输入步骤名称或组件名称"
          v-model="filterText"
          clearable
        >
        </el-input>
      </div>
      <el-tree
        class="tree_body"
        empty-text="暂无该步骤，请到事项步骤管理创建"
        :data="sourceList"
        @check-change="checkChange"
        node-key="id"
        :default-checked-keys="checkKeys"
        :props="{label: 'stepName'}"
        show-checkbox
        ref="sourceTree"
        check-on-click-node
        :filter-node-method="filterNode"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <el-tag v-if="data.type === 1" size="mini" type="primary">办理</el-tag>
        <el-tag v-else size="mini" type="success">查询</el-tag>
        <span style="margin-left: 5px">{{ data.stepName }}</span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sourceList: {
      type: Array,
      default() {
        return []
      }
    },
    // 默认选中
    checkKeys: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      targetList: [],
      filterText: '',
      isFirst: false
    }
  },
  methods: {
    handleDelete(node) {
      this.$refs.sourceTree.setChecked(node.data.id, false, false)
    },
    // 清除已选
    clearTargetList() {
      this.targetList = []
      // 清空勾选
      this.$refs.sourceTree.setCheckedNodes([])
      this.updateKeys()
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.stepName.indexOf(value) !== -1 || String(data.componentName).indexOf(value) !== -1 || String(data.id).indexOf(value) !== -1;
    },
    arrayRemoveByIndex(array, deleteIndex) {
      // 删除对应index项
      this.targetList = this.targetList.filter((item, index) => {
        return index !== deleteIndex
      }).map((item, index) => { // 序号重排
        item.order = index + 1
        return item
      })
    },
    fetchData() {
      this.targetList = []
      for (let i = 0; i < this.checkKeys.length; i++) {
        let id = this.checkKeys[i];
        this.sourceList.forEach(source => {
          if (source.id === id) {
            let target = {}
            target.order = i + 1;
            target.id = source.id;
            target.stepName = source.stepName;
            this.targetList.push(target)
          }
        })
      }
    },
    checkChange(checkNode, changeType) {
      if (changeType) {
        let target = {}
        target.id = checkNode.id
        target.stepName = checkNode.stepName
        target.order = this.targetList.length + 1
        this.targetList.push(target)
      } else {
        for (let i = 0; i < this.targetList.length; i++) {
          let id = checkNode.id;
          if (this.targetList[i].id === id) {
            this.arrayRemoveByIndex(this.targetList, i);
          }
        }
      }
      this.updateKeys()
    },
    allowDrop(draggingNode, dropNode, type) {
      return type !== 'inner';
    },
    dragEnd() {
      //更新order值
      for (let i = 0; i < this.targetList.length; i++) {
        this.targetList[i].order = i + 1
      }

      this.updateKeys()
    },
    updateKeys() {
      //更新父类的值
      let checkKey = []
      this.targetList.forEach(item => {
        checkKey.push(item.id)
      })
      this.$emit('update:checkKeys', checkKey)
    },
    // 设置右侧默认的勾选步骤
    autoSelectedSteps(ids) {
      this.$nextTick(() => {
        this.$refs.sourceTree.setCheckedKeys(ids, true)
        // 重新按序号排序,如果不重新排序会导致顺序是按右侧勾选的顺序
        this.targetList = ids.map((id, index) => {
          const newItem = this.targetList.find(item => id === item.id) || {}
          newItem.order = index + 1
          return newItem
        })
        // 更新父组件checkKeys
        this.updateKeys()
      })
    }
  },
  watch: {
    filterText(val) {
      this.$refs.sourceTree.filter(val);
    },
    sourceList() {
      this.$nextTick(() => {
        // 自动回显已配置的步骤
        this.$refs.sourceTree.setCheckedKeys(this.checkKeys)
      })
    }
  },
}

</script>
<style scoped lang="scss">
.tc_transfer {
  display: flex;
  justify-content: center;
  align-items: center;

  .tc_tree {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    //width: calc(50% - 20px);
    flex: 1;
    height: 350px;
    position: relative;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    font-size: 16px;
    vertical-align: middle;

    .tree_title {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      background: #f5f7fa;
      margin: 0;
      padding: 0 15px;
      border-bottom: 1px solid #e6ebf5;
    }

    .tree_body {
      flex: 1;
      overflow-y: auto;
      padding: 5px 5px 5px 0;
      border-radius: 5px;
    }
  }

  .filter-wrap {
    padding: 10px 20px;
  }

  ::v-deep .el-tree-node__label {
    font-size: 16px;
  }

  ::v-deep .el-tree-node__content {
    height: 30px;
    margin-bottom: 6px;
  }

  .tc-tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    line-height: 30px;
    overflow: hidden;

    .text-wrap {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;

      .name {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sort {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        margin-right: 4px;
        border-radius: 50%;
        border: 2px solid #409eff;
        color: #409eff;
        font-weight: bold;
        font-size: 14px;
      }

      .delete {
        margin: 0 10px;
      }
    }
  }

}

</style>
